import React,{useEffect, useState} from 'react';
import {View,TouchableOpacity,StyleSheet,ScrollView,Text,Image,TextInput,Modal} from 'react-native';
import '../../global'
import * as ImagePicker from 'expo-image-picker';
const Register=({navigation})=>{
    const [name,setName]=useState('');
    const [account,setAccount]=useState('');
    const [pwd,setPwd]=useState('');
    const [college,setCollege]=useState('');
    const [image,setImage] = useState('');
    const [modalVisible, setModalVisible] = useState(false);
    const [message,setMessage] = useState('');
    const [list,setList]=useState([{}])
    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.All,
          allowsEditing:true,
          base64:true,
          quality: 0.1
        });
        if (!result.cancelled) {
          fetch("https://wx.qasdwer.top:8080/pic",{

            method: 'post',
            body: JSON.stringify(result),
            headers: {
              'Content-Type': 'application/json'
            }
        
          })
          .then(res=>res.json())
          .then(res=>{
              console.log(res.addr)
              setImage(res.addr);
            })
        }
    };

   
    useEffect(()=>{
        fetch('https://wx.qasdwer.top:8080/user/login')
        .then(res=>res.json())
        .then(res=>{ 
          setList(res);
        })
        .catch((error)=>{
            console.log("Error");
            throw error;
          });
    },[])

    const Btn=()=>{
        if(image==''){
            return <TouchableOpacity  onPress={pickImage} style={styles.bg}>
            <Image source={{uri:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fb812c8fcc3cec3fd3ee79078d188d43f869427e5.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653530917&t=661ce7dddf13a6c87fa4d792946af6cf'}}
            style={styles.bg}
            />
         </TouchableOpacity>
        }else{
            return  <TouchableOpacity  onPress={pickImage} style={styles.bg}>
            <Image source={{uri:image}}
            style={styles.bg}
            />
         </TouchableOpacity>
            
        }
        
    }
    return(
        <ScrollView style={{backgroundColor:"white"}}>
            <View style={{marginTop:changeH(100),alignItems:'center'}}>
                <Text style={{fontSize:changeW(35)}}>填写基本信息</Text>
                <Text style={{color:'rgba(0,0,0,0.6)',marginTop:changeH(10)}}>向研友介绍一下自己吧</Text>
            </View>
            <View style={styles.bgview}>
                <Btn></Btn>
            </View>
            <View style={styles.inp}>
                <View style={[styles.list,{borderTopWidth:1}]}>
                    <Text style={{fontSize:changeW(25)}}>昵称</Text>
                    <TextInput
                    style={styles.account}
                    onChangeText={text => setName(text)}
                    value={name}
                    placeholder='请填写昵称'
                    />
                </View>
                <View style={styles.list}>
                    <Text style={{fontSize:changeW(25)}}>账号</Text>
                    <TextInput
                    style={styles.account}
                    onChangeText={text => setAccount(text)}
                    value={account}
                    placeholder='请填写账号'
                    />
                </View>
                <View style={styles.list}>
                    <Text style={{fontSize:changeW(25)}}>密码</Text>
                    <TextInput
                    style={styles.account}
                    onChangeText={text => setPwd(text)}
                    value={pwd}
                    placeholder='请填写密码'
                    />
                </View>
                <View style={styles.list}>
                    <Text style={{fontSize:changeW(25)}}>学校和专业</Text>
                    <TextInput
                    style={styles.account}
                    onChangeText={text => setCollege(text)}
                    value={college}
                    placeholder='请填写学校和专业'
                    />
                </View>
            </View>
            <Modal
                            transparent={true}
                            visible={modalVisible}
                >
                    <View>
                    <View style={{backgroundColor:'rgba(0,0,0,0.7)',borderRadius:20,
                        display:'flex',justifyContent:'center',alignItems:'center',
                        width:'70%',height:changeH(330),top:0.3*h,left:0.15*w}}>
                        <Text style={{color:'#F5F5F5',fontSize:changeW(35),fontWeight:'bold'}}>{message}</Text>
                    </View>
                    </View>
                </Modal>
            <TouchableOpacity style={styles.btn} onPress={()=>{
                if(name==''||account==''||pwd==''||college==''||image==''){
                    setModalVisible(true);
                    setMessage('请完善信息！');
                    setTimeout(()=>{
                        setModalVisible(false);
                    },2000)
                }else{
                    for(var i=0;i<list.length;i++){
                        if(account==list[i].user_number){
                                setModalVisible(true);
                                setMessage('该账号已存在！');
                                setTimeout(()=>{
                                    setModalVisible(false);
                                },2000)
                                 return;
                        } 
                     }
                     fetch('https://wx.qasdwer.top:8080/user/register',{
                        method:'put',
                        headers:{
                          'content-type':'application/json;charset=utf-8'
                        },
                        body:JSON.stringify({name:name,account:account,pwd:pwd,img:image,college:college})
                        })
                        .then(()=>{
                            setModalVisible(true);
                        setMessage('注册成功！');
                        setTimeout(()=>{
                            setModalVisible(false);
                            navigation.navigate('User')
                        },2000)
                            })
                        .catch((error)=>{
                            console.log("Error");
                            throw error;
                        });
                        
                }
            }}>   
                 <Text style={styles.btntxt}>完成</Text> 
            </TouchableOpacity>
        </ScrollView>
    )
}

const styles=StyleSheet.create({
    inp:{
        width:'80%',
        marginLeft:changeW(70),
        marginTop:changeH(100)
    },
    list:{
        paddingTop:changeH(30),
        paddingBottom:changeH(5),
        marginBottom:changeH(20),
        borderBottomWidth:1,
        borderColor:'rgba(0,0,0,0.2)',
    },
    account:{
        marginTop:changeH(20),
        fontSize:changeW(20)
    },
    btn:{
        width:changeW(500),
        height:changeH(80),
        backgroundColor:'rgb(150,150,150)',
        borderRadius:changeW(30),
        marginLeft:changeW(120),
        marginTop:changeH(100),
        justifyContent:'center',
        alignItems:'center'
    },
    btntxt:{
        fontSize:changeW(30),
        color:'rgba(255,255,255,0.9)'
    },
    bgview:{
        marginLeft:changeW(270),
        marginTop:changeH(40)
    },
    bg:{
        width:100,
        height:100,
        borderRadius:50,
    }
})
export default Register;